<script lang="ts" setup>
import { ref } from 'vue'

// 页面配置
definePage({
  style: {
    navigationBarTitleText: '安全设置',
    backgroundColor: '#FFFFFF',
    navigationBarTextStyle: 'black',
  },
})

// 安全状态
const securityStatus = ref({
  isPasswordSet: true, // 是否设置了密码
  isPhoneBound: true, // 是否绑定了手机
  isEmailBound: true, // 是否绑定了邮箱
  lastLoginTime: '2024-01-15 09:30:45', // 最后登录时间
  lastLoginDevice: 'Chrome / Windows 10', // 最后登录设备
  loginDays: 45, // 连续登录天数
  hasLoginProtection: false, // 是否开启登录保护
})

// 模拟脱敏的手机号和邮箱
const maskedPhone = securityStatus.value.isPhoneBound ? '138****5678' : null
const maskedEmail = securityStatus.value.isEmailBound ? 'user****@example.com' : null

// 处理菜单项点击
function handleMenuItemClick(action: string) {
  console.log(`点击了${action}`)

  switch (action) {
    case 'changePassword':
      // 跳转到修改密码页面或显示修改密码弹窗
      uni.navigateTo({
        url: '/pages-sub/settings/change-password',
      })
      break
    case 'bindPhone':
      // 跳转到绑定手机页面
      uni.navigateTo({
        url: '/pages-sub/settings/bind-phone',
      })
      break
    case 'bindEmail':
      // 跳转到绑定邮箱页面
      uni.navigateTo({
        url: '/pages-sub/settings/bind-email',
      })
      break
    case 'manageDevices':
      // 跳转到设备管理页面
      uni.navigateTo({
        url: '/pages-sub/settings/devices',
      })
      break
    case 'loginHistory':
      // 跳转到登录记录页面
      uni.navigateTo({
        url: '/pages-sub/settings/login-history',
      })
      break
    case 'securityTips':
      // 显示安全提示信息
      showSecurityTips()
      break
  }
}

// 显示安全提示
function showSecurityTips() {
  uni.showModal({
    title: '安全提示',
    content: '1. 建议定期修改密码\n2. 不要在公共设备上记住登录状态\n3. 请勿将账号密码告知他人\n4. 绑定手机和邮箱以提高账号安全性',
    showCancel: false,
    confirmText: '我知道了',
  })
}

// 计算安全等级
function getSecurityLevel() {
  let score = 0

  if (securityStatus.value.isPasswordSet)
    score += 30
  if (securityStatus.value.isPhoneBound)
    score += 40
  if (securityStatus.value.isEmailBound)
    score += 30

  if (score >= 80)
    return { text: '高', color: 'text-green-500' }
  if (score >= 50)
    return { text: '中', color: 'text-orange-500' }
  return { text: '低', color: 'text-red-500' }
}

const securityLevel = getSecurityLevel()

// 页面加载时执行
onLoad(() => {
  console.log('账户安全页面已加载')
  // 可以在这里从服务器加载用户的安全设置信息
})
</script>

<template>
  <view class="security-settings-container min-h-screen bg-slate-50">
    <!-- 安全等级区域 -->
    <view class="security-level-section mt-3 bg-white px-4 py-4">
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <i class="i-solar:shield-check-broken mr-3 text-primary" />
          <view>
            <text class="block text-slate-900 font-medium">安全等级评估</text>
            <text class="mt-1 text-xs text-slate-500">提高安全设置可保护账号安全</text>
          </view>
        </view>
        <text class="text-xl font-bold" :class="securityLevel.color">{{ securityLevel.text }}</text>
      </view>
    </view>

    <!-- 账户安全设置区域 -->
    <view class="settings-section mt-3">
      <view class="section-header bg-white px-4 py-2">
        <view class="flex items-center">
          <i class="i-solar:lock-keyhole-minimalistic-broken mr-2 text-primary" />
          <text class="text-lg font-medium">账户安全设置</text>
        </view>
      </view>
      <view class="section-content bg-white">
        <!-- 修改登录密码 -->
        <view
          class="setting-item border-b border-slate-100 px-4 py-3"
          @click="handleMenuItemClick('changePassword')"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <i class="i-solar:key-square-broken mr-3 text-slate-500" />
              <text class="text-slate-900">修改登录密码</text>
            </view>
            <view class="flex items-center">
              <text class="mr-2 text-xs text-slate-500">{{ securityStatus.isPasswordSet ? '已设置' : '未设置' }}</text>
              <i class="i-carbon-chevron-right text-slate-300" />
            </view>
          </view>
        </view>
        <!-- 绑定手机 -->
        <view
          class="setting-item border-b border-slate-100 px-4 py-3"
          @click="handleMenuItemClick('bindPhone')"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <i class="i-solar:smartphone-2-broken mr-3 text-slate-500" />
              <text class="text-slate-900">绑定手机</text>
            </view>
            <view class="flex items-center">
              <text class="mr-2 text-xs text-slate-500">{{ maskedPhone || '未绑定' }}</text>
              <i class="i-carbon-chevron-right text-slate-300" />
            </view>
          </view>
        </view>
        <!-- 绑定邮箱 -->
        <view
          class="setting-item px-4 py-3"
          @click="handleMenuItemClick('bindEmail')"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <i class="i-solar:mention-circle-line-duotone mr-3 text-slate-500" />
              <text class="text-slate-900">绑定邮箱</text>
            </view>
            <view class="flex items-center">
              <text class="mr-2 text-xs text-slate-500">{{ maskedEmail || '未绑定' }}</text>
              <i class="i-carbon-chevron-right text-slate-300" />
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 登录安全区域 -->
    <view class="settings-section mt-3">
      <view class="section-header bg-white px-4 py-2">
        <view class="flex items-center">
          <i class="i-solar:shield-up-broken mr-2 text-primary" />
          <text class="text-lg font-medium">登录安全</text>
        </view>
      </view>
      <view class="section-content bg-white">
        <!-- 登录设备管理 -->
        <view
          class="setting-item border-b border-slate-100 px-4 py-3"
          @click="handleMenuItemClick('manageDevices')"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <i class="i-solar:laptop-broken mr-3 text-slate-500" />
              <text class="text-slate-900">登录设备管理</text>
            </view>
            <i class="i-carbon-chevron-right text-slate-300" />
          </view>
        </view>
        <!-- 登录记录 -->
        <view
          class="setting-item px-4 py-3"
          @click="handleMenuItemClick('loginHistory')"
        >
          <view class="flex items-center justify-between">
            <view class="flex items-center">
              <i class="i-solar:history-broken mr-3 text-slate-500" />
              <text class="text-slate-900">登录记录查询</text>
            </view>
            <i class="i-carbon-chevron-right text-slate-300" />
          </view>
        </view>
      </view>
    </view>

    <!-- 安全提示区域 -->
    <view
      class="security-tips-section mt-3 bg-white px-4 py-3"
      @click="handleMenuItemClick('securityTips')"
    >
      <view class="flex items-center justify-between">
        <view class="flex items-center">
          <i class="i-solar:info-circle-broken mr-2 text-slate-400" />
          <text class="text-sm text-slate-500">
            点击查看安全提示
            \n• 已连续安全登录 {{ securityStatus.loginDays }} 天
            \n• 上次登录：{{ securityStatus.lastLoginTime }} on {{ securityStatus.lastLoginDevice }}
          </text>
        </view>
        <i class="i-carbon-chevron-right text-slate-300" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.security-settings-container {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  padding-bottom: 20px;
}

.security-level-section {
  border-radius: 8px;
  margin-bottom: 8px;
}

.settings-section {
  margin-bottom: 8px;
}

.section-header {
  font-weight: 500;
}

.section-content {
  overflow: hidden;
}

.setting-item {
  transition: background-color 0.2s ease;
}

.setting-item:active {
  background-color: #f9fafb;
}

.security-tips-section {
  border-radius: 8px;
}

// 处理文本换行
.text-sm {
  white-space: pre-line;
  line-height: 1.5;
}
</style>
